import { Popup } from 'antd-mobile'
import { useAppDispatch, useAppSelector } from '../../app/hooks'
import NavBar from '../../components/publicComponents/navBar/NavBar'
import FilterNav from '../../components/Around/FilterNav'
import { setVisibleToFalse, visible } from '../../features/around/AroundSlice'
import style from './index.module.css'
import FilterConditions from '../../components/Around/FilterConditions'
import AroundShowList from '../../components/Around/AroundShowList'

export default function Around() {
  const isVisible = useAppSelector(visible)
  const dispatch = useAppDispatch()

  return (
    <div className={style.around}>
      {/* 搜索栏 */}
      <NavBar />
      {/* 分类导航 */}
      <FilterNav />
      {/* 数据展示 */}
      <AroundShowList />
      {/* 条件筛选 */}
      <Popup
        visible={isVisible}
        onMaskClick={() => {
          dispatch(setVisibleToFalse(false))
        }}
        bodyStyle={{
          borderTopLeftRadius: '20px',
          borderTopRightRadius: '20px',
          minHeight: '40vh'
        }}
      >
        <FilterConditions />
      </Popup>
    </div>
  )
}
